<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: #333;
			}

			.a {
				position: relative;
				width: 500px;
				height: 387px;
				margin: 80px auto;
				background: url("../images/images/redian.png") no-repeat;
			}

			.a .city {
				position: absolute;
				top: 154px;
				right: 139px;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: hotpink;
			}

			.a .zhejiang {
				top: 269px;
				right: 102px;
			}

			.a .guangzhou {
				top: 326px;
				right: 163px;
			}

			.a div[class^='pulse'] {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 6px;
				height: 6px;
				transform: translate(-50%, -50%);
				box-shadow: 0 0 12px hotpink;
				border-radius: 50%;
				animation: pulse 1.5s linear infinite;
			}
			/* 这里分别给每个波纹盒子延迟触发动画的时间,这样就可以错开显示 要注意权重 */
			.a .city .pulse2 {
				animation-delay: 0.4s;
			}

			.a .city .pulse3 {
				animation-delay: 0.8s;
			}

			@keyframes pulse {
				0% {}

				70% {
					/* 这里之所以不用放大scale是因为它会同时放大阴影 不好看 */
					width: 20px;
					height: 20px;
					/* 透明度opacity */
					opacity: 1;
				}

				100% {
					width: 40px;
					height: 40px;
					/* 透明度opacity */
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<!-- 这个案例的结构思路和样式思路可以多思考几遍 -->
		<!-- 这个案例到处是坑 -->
		<div class="a">
			<!-- 这里的思路是在里面放多个盒子来实现波纹效果  波纹盒子采用定位来水平垂直居中压住实心点-->
			<div class="city">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
			<div class="city zhejiang">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
			<div class="city guangzhou">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
		</div>
	</body>
</html>
